<template>
  <p class="tip">等待对方接听<span class="dot">{{ dot }}</span></p>
</template>

<script>

export default {
  name: 'CallingTip',
  data () {
    return {
      timer: null,
      dot: '.'
    };
  },
  mounted () {
    let count = 0;

    this.timer = setInterval(() => {
      ++count;
      this.dot = '.'.repeat(count % 4);
    }, 500);
  },
  beforeDestroy () {
    clearInterval(this.timer);
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>

.tip {
  position: relative;

  .dot {
    position: absolute;
    left: 100%;
  }
}

</style>
